<template>
    <el-form :model="dynamicValidateForm" ref="customForm"  size="medium">
        <el-row>
            <el-col :span="domain.width||24" :key="index"  v-for="(domain, index) in dynamicValidateForm.labelDictList" class="text-module" v-if="domain['inputValue']">
                    <div class="xl-form-body"
                         :label="domain.fieldName+':'"
                         :key="domain.field+'_'+index">
                        <p class="xl-form-item">
                            <span class="xl-label"  style="text-align: left;" :style="styleFun">
                                <span v-html="domain.fieldName+':'"></span>
                            </span>

                             <span class="xl-form-content ellipsis">
                                 <span v-if="domain.fieldType==='date'" :title="domain['inputValue']|FormatDate('yyyy/MM/dd')">
                                    {{domain['inputValue']|FormatDate('yyyy/MM/dd')}}
                                </span>
                                <span v-html="domain['inputValue']" v-else :title="domain['inputValue']" class=""></span>
                            </span>
                        </p>
                    </div>
            </el-col>
        </el-row>
        <slot name="end"></slot>
    </el-form>
</template>

<script>

export default {
  name: 'tempalte-module',
  components: {  },
  data() {
    return {
      dynamicValidateForm: {
        labelDictList: []
      },
    }
  },
  props: {
    labelWidth: '',
    labelDict: {
      default() {
        return [];
      },
    },
    formData: {
      type: Object,
      default() {
        return {};
      },
    }
  },
  computed: {
    styleFun() {
      if (this.labelWidth) return {
        'min-width': this.labelWidth
      };
    }
  },
  model: {
    prop: 'value',
    event: 'handlerValueChange'
  },
  watch: {
    formData: {
      handler(v, o) {
        if (v) {
          for (let i = 0; i < this.labelDict.length; i++) {
            let f = this.labelDict[i];
            // v-html="(renderer?renderer(item,field):item[field.tableField])||'无'"
            f['inputValue'] = f['renderer']?f['renderer'](v):v[f.field];
          }
          this.dynamicValidateForm.labelDictList = JSON.parse(JSON.stringify(this.labelDict));
        }
      },
      immediate: true,
      deep: true
    },
  },
  methods: {

    setFormFile(file, field) {
    },
    reset() {
      for (let i = 0; i < this.labelDict.length; i++) {
        let f = this.labelDict[i];
        f['inputValue'] = null;
      }
    }
  },
  created() {

  },
  mounted() {

  }
}
</script>

<style scoped lang="less">
    .text-module{
        margin-bottom: 0;
        /deep/ .el-form-item__label{
            color: #949aa6;
        }
        /deep/ .el-form-item{
            margin: 0;
        }
    }
    .xl-form-item{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }
    .xl-label{
        color: #949aa6;
        text-align: right;
        vertical-align: middle;
        font-size: 14px;
        line-height: 40px;
        padding: 0 12px 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .xl-form-content{
        text-align: left;
        line-height: 40px;
        position: relative;
        font-size: 14px;
        flex: 1;
    }
</style>
